<template>
  <div>
    <el-form inline>
      <el-form-item :label="queryTime.label">
        <el-date-picker :type="queryTime.type" v-model="queryParams.date" :value-format="queryTime.format"
          @change="handleDate" />
      </el-form-item>
      <el-form-item label="分析">
        <el-radio-group v-model="valueKeys[0]" @change="updateChart">
          <el-radio-button v-for="(v,k,i) in valueFormat" :label="k" :key="'value_key_'+i">{{ v.name }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('analysis.Sort')">
        <el-switch v-model="sourceAsc" :active-text="$t('analysis.Desc')" :inactive-text="$t('analysis.Asc')"
          @change="updateChart" />
      </el-form-item>
    </el-form>
    <div ref="chart" style="width: 90vw;height: 45vh;"></div>
  </div>
</template>
<script>
  /**
  5.实时显示各教室设备的资产利用率，以百分比的形式显示（例如：空调、投影、灯光）；
 */
  import deviceCalendarAPI from '@/api/device/calendar'
  import * as echarts from 'echarts'
  import {
    today
  } from '@/views/components/utils';
  export default {
    name: 'AnalysisCalendarChart',
    data() {
      return {
        valueFormat: {
          online: {
            name: '在线时长',
            unit: '秒'
          },
          work: {
            name: '工作时长',
            unit: '秒'
          },
          energy: {
            name: '能耗',
            unit: 'w'
          },
          totalCount: {
            name: '设备数',
            unit: '个'
          },
          onlineCount: {
            name: '在线数',
            unit: '个'
          },
        },
        chartOption: {
          title: {
            text: '设备使用情况统计分析',
            left: 'center'
          },
          tooltip: {
            show: true
          },
          series: [{
            name: '统计分析',
            type: 'pie',
            radius: [20, 90],
            center: ['50%', '50%'],
          }]
        },
        queryTime: {
          label: '日期',
          type: 'date',
          valueFormat: 'yyyy-MM-dd'
        },
        queryParams: {
          date: null,
          groupDept: true,
          groupType: false,
          groupDate: null
        },
        list: [],
        valueKeys: ['online'],
        sourceAsc: false,
        chart: null,
      }
    },
    created() {
      this.queryParams.date = today()
      this.queryData()
    },
    mounted() {
      setTimeout(this.createChart, 300)
    },
    methods: {
      queryData() {
        const vm = this
        deviceCalendarAPI.analysis(this.queryParams).then(res => {
          vm.list = [].concat(res.data)
          vm.updateChart()
        })
      },
      handleDate() {
        this.queryData()
      },
      createChart() {
        const el = this.$refs['chart']
        this.chart = echarts.init(el);
        this.chart.setOption(this.chartOption)
        this.updateChart();
      },
      updateChart() {
        if (this.chart === null) {
          return
        }

        const vm = this
        const {
          valueKeys,
          list,
          valueFormat,
          sourceAsc
        } = this
        const data = list.map(item => {
          const {
            department,
            type,
            date
          } = item
          return {
            name: department || type || date,
            value: item[valueKeys[0]]
          }
        }).sort(function (a, b) {
          return sourceAsc ? b.value - a.value : a.value - b.value
        })
        const updateOption = {
          series: [{
            data
          }]
        }
        this.chart.setOption(updateOption);
      }
    }
  }

</script>
